<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>B站数据分析</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script>        tailwind.config = {
        theme: {
            extend: {
                colors: {
                    bilibili: {
                        pink: '#FB7299',
                        blue: '#23ADE5',
                        dark: '#18191C',
                    }
                },
                fontFamily: {
                    sans: ['"Noto Sans SC"', 'sans-serif'],
                }
            }
        }
    }
    </script>
    <style>        @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap');

    body {
        font-family: 'Noto Sans SC', sans-serif;
        background-color: #f5f5f5;
    }

    .gradient-bg {
        background: linear-gradient(135deg, #23ADE5 0%, #FB7299 100%);
    }

    .card-hover {
        transition: all 0.3s ease;
    }

    .card-hover:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    }

    .loading-spinner {
        border: 4px solid rgba(0, 0, 0, 0.1);
        border-radius: 50%;
        border-top: 4px solid #FB7299;
        width: 40px;
        height: 40px;
        animation: spin 1s linear infinite;
        margin: 20px auto;
    }

    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }

    .input-focus:focus {
        border-color: #FB7299;
        box-shadow: 0 0 0 3px rgba(251, 114, 153, 0.2);
    }
    </style>
</head>
<body class="bg-gray-100">
<div class="min-h-screen flex flex-col">
    <!-- 顶部导航 -->
    <nav class="bg-white shadow-sm">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between h-16">
                <div class="flex items-center">
                    <div class="flex-shrink-0 flex items-center">
                        <i class="fab fa-bilibili text-3xl text-bilibili-pink"></i>
                        <span class="ml-2 text-xl font-bold text-gray-800">B站数据分析</span>
                    </div>
                </div>
                <div class="flex items-center">
                    <a href="https://www.bilibili.com/" class="text-gray-600 hover:text-bilibili-pink mr-4">
                        前往b站主页
                    </a>
                </div>
            </div>
        </div>
    </nav>

    <main class="flex-grow">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
            <div class="text-center mb-12">
                <h1 class="text-4xl font-bold text-gray-800 mb-4">B站数据分析</h1>
<!--                <p class="text-xl text-gray-600 max-w-3xl mx-auto">分析B站UP主数据与视频数据，直观显示数据</p>-->
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-4xl mx-auto">
                <!-- UP主分析 -->
                <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover">
                    <div class="gradient-bg p-6 text-white">
                        <div class="flex items-center">
                            <div class="p-3 rounded-full bg-white bg-opacity-20 text-white mr-4">
                                <i class="fas fa-user-astronaut text-2xl"></i>
                            </div>
                            <h2 class="text-2xl font-bold">UP主分析</h2>
                        </div>
                    </div>
                    <div class="p-6">
<!--                        <p class="text-gray-600 mb-6">分析UP主的粉丝增长、视频表现、观众画像等全方位数据</p>-->

                        <div class="mb-4">
                            <label for="upInput" class="block text-sm font-medium text-gray-700 mb-2">UP主ID或主页链接</label>
                            <div class="mt-1 relative rounded-md shadow-sm">
                                <input type="text" id="upInput" class="input-focus block w-full pl-4 pr-12 py-3 border border-gray-300 rounded-md leading-5 bg-white placeholder-gray-500 focus:outline-none focus:ring-bilibili-pink focus:border-bilibili-pink sm:text-sm" placeholder="例如: 38719597 或 space.bilibili.com/38719597">
                            </div>
                        </div>

                        <button onclick="analyzeUP()" class="w-full bg-bilibili-pink hover:bg-bilibili-blue text-white font-medium py-3 px-4 rounded-lg transition-all duration-300 flex items-center justify-center">
                            <i class="fas fa-chart-line mr-2"></i>
                            立即分析
                        </button>
                    </div>
                </div>

                <!-- 视频分析 -->
                <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover">
                    <div class="gradient-bg p-6 text-white">
                        <div class="flex items-center">
                            <div class="p-3 rounded-full bg-white bg-opacity-20 text-white mr-4">
                                <i class="fas fa-film text-2xl"></i>
                            </div>
                            <h2 class="text-2xl font-bold">视频分析</h2>
                        </div>
                    </div>
                    <div class="p-6">
<!--                        <p class="text-gray-600 mb-6">分析视频的播放数据、弹幕评论、观众互动等全方位指标</p>-->

                        <div class="mb-4">
                            <label for="videoInput" class="block text-sm font-medium text-gray-700 mb-2">视频ID或链接</label>
                            <div class="mt-1 relative rounded-md shadow-sm">
                                <input type="text" id="videoInput" class="input-focus block w-full pl-4 pr-12 py-3 border border-gray-300 rounded-md leading-5 bg-white placeholder-gray-500 focus:outline-none focus:ring-bilibili-pink focus:border-bilibili-pink sm:text-sm" placeholder="例如: BV1GJ411x7h7 或 bilibili.com/video/BV1GJ411x7h7">
                            </div>
                        </div>

                        <button onclick="analyzeVideo()" class="w-full bg-bilibili-pink hover:bg-bilibili-blue text-white font-medium py-3 px-4 rounded-lg transition-all duration-300 flex items-center justify-center">
                            <i class="fas fa-chart-bar mr-2"></i>
                            立即分析
                        </button>
                    </div>
                </div>
            </div>

            <!-- 功能介绍 -->
            <div class="max-w-4xl mx-auto mt-16">
                <h2 class="text-2xl font-bold text-gray-800 mb-6 text-center">平台功能</h2>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                    <div class="bg-white p-6 rounded-lg shadow-sm card-hover">
                        <div class="text-bilibili-pink mb-4">
                            <i class="fas fa-chart-pie text-3xl"></i>
                        </div>
                        <h3 class="text-lg font-semibold text-gray-800 mb-2">数据可视化</h3>
                        <p class="text-gray-600">直观的图表展示各项数据指标，帮助您快速理解数据</p>
                    </div>
                    <div class="bg-white p-6 rounded-lg shadow-sm card-hover">
                        <div class="text-bilibili-pink mb-4">
                            <i class="fas fa-comments text-3xl"></i>
                        </div>
                        <h3 class="text-lg font-semibold text-gray-800 mb-2">弹幕分析</h3>
                        <p class="text-gray-600">深入分析弹幕内容，了解观众实时反馈和情感倾向</p>
                    </div>
                    <div class="bg-white p-6 rounded-lg shadow-sm card-hover">
                        <div class="text-bilibili-pink mb-4">
                            <i class="fas fa-users text-3xl"></i>
                        </div>
                        <h3 class="text-lg font-semibold text-gray-800 mb-2">观众画像</h3>
                        <p class="text-gray-600">分析观众性别、等级等特征，分析视频受众</p>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="bg-white border-t border-gray-200">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
            <div class="md:flex md:items-center md:justify-between">
                <div class="flex justify-center md:order-2 space-x-6">
                    <a href="https://gitee.com/hanbaockd" class="...">
                        <i class="fab fa-github text-xl"></i> <!-- 临时使用GitHub图标 -->
                    </a>
                    <a href="https://space.bilibili.com/38719597" class="...">
                        <i class="fab fa-bilibili text-xl"></i>
                    </a>
                </div>
                <div class="mt-4 md:mt-0 md:order-1">
                    <p class="text-center text-sm text-gray-500">
                        &copy; 2025 B站数据分析系统. by hanbaockd. 《基于SSM框架的b站视频数据挖掘分析系统》.
                    </p>
                </div>
            </div>
        </div>
    </footer>
</div>

<script>
    function analyzeUP() {
        const upInput = document.getElementById('upInput').value.trim();
        if (!upInput) {
            alert('请输入UP主ID或主页链接');
            return;
        }

        const upId = extractId(upInput);
        if (!upId) {
            alert('无法识别UP主ID，请检查输入格式');
            return;
        }

        console.log('分析UP主:', upId);
        // alert(`首次获取up主数据耗时可能较长，请耐心等待`);
        window.location.href = `up?uid=${upId}`;
    }

    function analyzeVideo() {
        const videoInput = document.getElementById('videoInput').value.trim();
        if (!videoInput) {
            alert('请输入视频ID或链接');
            return;
        }
        const bvId = extractBvId(videoInput);
        if (!bvId) {
            alert('无法识别视频BV号，请检查输入格式');
            return;
        }

        window.location.href = `video?bvid=${bvId}`;
    }

    // 从输入中提取UP主ID
    function extractId(input) {
        if (/^\d+$/.test(input)) {
            return input;
        }
        const matches = input.match(/(?:space\.bilibili\.com|bilibili\.com\/space)\/(\d+)/);
        if (matches && matches[1]) {
            return matches[1];
        }

        return null;
    }

    // 从输入中提取视频BV号
    function extractBvId(input) {
        if (/^BV[a-zA-Z0-9]+$/.test(input)) {
            return input;
        }

        const matches = input.match(/(?:bilibili\.com\/video\/|video\.bilibili\.com\/)(BV[a-zA-Z0-9]+)/);
        if (matches && matches[1]) {
            return matches[1];
        }

        return null;
    }
</script>
</body>
</html>